<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <el-row :gutter="12">
        <span>全体信息</span>
      </el-row>
      <el-divider />

      <el-row :gutter="12">
        <el-col
          :span="24 / list.length"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-card shadow="hover"> {{ item.name }} : {{ item.count }} </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-divider />

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>各学院数据</span>
        </div>
      </template>

      <div>
        <el-table :data="tableData">
          <el-table-column prop="name" label="学院名称" />
          <el-table-column prop="teacherCount" label="教师人数" />
          <el-table-column prop="studentCount" label="学生人数" />
          <el-table-column prop="workedCount" label="已实习学生人数" />
          <el-table-column prop="unWork" label="未实习学生人数" />
        </el-table>
      </div>
    </el-card>

    <el-divider />

    <el-card shadow="hover">
      <div id="main" ref="main" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import adminApi from "@/api/teacher";

export default {
  data() {
    return {
      list: [],
      tableData: [],
      echartsData: [],
      option: {
        title: {
          text: "学生实习信息统计",
          subtext: "情韵统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: new Date(),
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    // 获取数据
    adminApi.getCountInfo().then((resp) => {

      // 填充统计数据
      this.list = resp.data.list
      this.tableData = resp.data.tableData
      this.echartsData = resp.data.echartsData

      // 填充echarts数据
      // 添加统计时间
      // console.log(new Date())
      this.option.series[0].name = new Date().toLocaleDateString();
      this.option.series[0].data = this.echartsData;
      // 基于准备好的dom，初始化echarts实例
      console.log(this.$refs.main);
      let myChart = this.$echarts.init(this.$refs.main);
      // 绘制图表
      myChart.setOption(this.option);
      
    })

  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
